<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    #box1
    {
        text-align: center;
    }
    </style>

    <script type="text/javascript">
    window.onload=function()
    {
        //使得图片可以自动切换
        var img1=document.getElementById("img1");
        //获取需要切换的图片
        var imgArr=["../伊蕾娜素材/图一.jpeg","../伊蕾娜素材/图二.jpg","../伊蕾娜素材/图三.jpg","../伊蕾娜素材/图四.jpg","../伊蕾娜素材/图五.jpg","../伊蕾娜素材/图六.jpg","../伊蕾娜素材/图七.jpg","../伊蕾娜素材/图八.jpg","../伊蕾娜素材/图九.png","../伊蕾娜素材/图十.jpg"];
        //创建一个变量用作图片数组的索引
        var index=0;
        
        //为btn01绑定一个单击响应函数
        var btn01=document.getElementById("btn01");
        var timer;
        //开启一个定时器，来自动切换图片
        btn01.onclick=function()
        {
            //点击多次开启，会导致切换图片的速度越来越快
            //并且只能关闭最后一次开启的定时器

            //在开启一个新的计时器之前，要把上一个开启的计时器关闭
            clearInterval(timer);
            timer=setInterval(function()
        {
            index++;
            /*
            if(index>=imgArr.length)
            {
                index=0;
            }
            */
            //也可以用另一种方法实现循环
            index=index%imgArr.length;
            img1.src=imgArr[index];
        },500);
        };

        //为btn02绑定一个单击响应函数
        var btn02=document.getElementById("btn02");
        btn02.onclick=function()
        {
            //点击按钮以后，停止图片的切换，也就是关闭定时器
            clearInterval(timer);
            //clearnterval()可以接收任意参数
            //如果参数不是一个有效的标识，则什么也不做
        };
    }
    </script>
</head>
<body>
    <div id="box1">
    <img src="../伊蕾娜素材/图一.jpeg" id="img1" width="600px" height="600px">
    <br>
    <button id="btn01">开始</button>
    <button id="btn02">停止</button>
    </div>
</body>
</html>